import { EDITED_MESSAGE, SEND_MESSAGE } from "./action";
import { Action, Contact } from "./interface";

interface ChatProps {
  contact: Contact;
  message: string;
  dispatch: React.Dispatch<Action>;
}

function Chat({ contact, message, dispatch }: ChatProps) {
  return (
    <section className="chat">
      <textarea
        value={message}
        placeholder={"和" + contact.name + "聊天"}
        onChange={e => {
          // TODO: 派发action从e.target.value获取值
          dispatch({
            type: EDITED_MESSAGE,
            payload: {
              message: e.target.value
            }
          });
        }}
      />
      <br />
      <button
        onClick={() => {
          alert(`正在发送 "${message}" 到 ${contact.email}`);
          dispatch({
            type: SEND_MESSAGE
          });
        }}
      >
        发送到{contact.email}
      </button>
    </section>
  );
}

export default Chat;
